<template>
  <Form :model="formItem"
        :rules="ruleInline"
        :label-width="80"
        ref="object_form">

    <Alert show-icon>
      角色基本信息
      <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
    </Alert>

    <FormItem label="角色名称" prop="role_name" style="margin-top: 20px;">
      <Input v-model="formItem.role_name" placeholder="请输入角色名称..."></Input>
    </FormItem>

    <FormItem label="备注" prop="role_comment">
      <Input v-model="formItem.role_comment" placeholder="请输入权限备注..."></Input>
    </FormItem>

    <FormItem label="分配权限" prop="role_comment">
      <resource_tree
        :tree_data="tree_data"
        @onLoadTreeData="loadTreeData"
        :isMultiple="true"
        ref="resource_tree"
      ></resource_tree>
    </FormItem>

    <FormItem>
      <Button type="primary" @click="handleSubmit">提交</Button>
      <Button type="primary" @click="handleReturn" style="margin-left: 8px">返回</Button>
      <Button type="primary" @click="handleReset" style="margin-left: 8px">清空</Button>
    </FormItem>
  </Form>
</template>
<script>
  import resource_tree from '../utils/tree_components_util'


  export default {
    data() {
      return {
        formItem: {
          role_name: "",
          role_comment: "",
        },
        ruleInline: {
          role_name: [
            {required: true, message: '此项为必添项!', trigger: 'blur'},
            {max: 50, message: "长度不可以超过50!", trigger: 'blur'}
          ],
          role_comment: [
            {max: 100, message: "长度不可以超过100!", trigger: 'blur'}
          ]
        },
        tree_data: []
      }
    },
    components: {
      resource_tree: resource_tree
    },
    beforeCreate: function () {
      this.$Spin.show();
    },
    created: function () {
      const id = this.params.id;
      if ("" != id) {//这个说明是修改，要发请求获得更有的数据
        this.$http.get(this.apiUrl() + 'role/get/' + id, {}, {
          emulateJSON: true
        }).then((response) => {
          if (response && response.body.success) {
            this.formItem.role_name = response.body.role.name;
            this.formItem.role_comment = response.body.role.comment;
          } else {
            if (response.body.msg === 'session-timeout') {
              window.location.href = "/";
            } else {
              this.$Notice.error({title: "错误", desc: response.body.msg});
            }
          }
          this.$Spin.hide();
        });
      } else {
        this.$Spin.hide();
      }
      this.loadTreeData(id);
    },
    methods: {
      handleSubmit: function () {
        this.$refs['object_form'].validate((valid) => {
          if (valid) {
            const checked_tree = this.$refs.resource_tree.getCheckNodes();
            if (checked_tree.length == 0) {
              this.$Notice.error({title: '错误', desc: "请选择权限!"});
              return;
            }
            this.$http.post(this.apiUrl() + 'role/save/', {
              name: this.formItem.role_name,
              comment: this.formItem.role_comment,
              id: this.params.id,
              resource_ids: checked_tree.join(",")
            }, {
              emulateJSON: true
            }).then((response) => {
              if (response.body.success) {
                this.$Message.success(response.body.msg);
                //转到resource_list页面
                this.$emit('childClickMenu', '系统管理', '角色管理', 'role_list');
              } else {
                this.$Notice.error({title: '错误', desc: response.body.msg});
              }
            });
          } else {
            this.$Notice.error({title: '错误', desc: "请输入完事信息后进行提交!"});
          }
        })
      },
      /**
       * 返回到权限列表页
       */
      handleReturn: function () {
        this.$emit('childClickMenu', '系统管理', '权限管理', 'role_list');
      },
      handleReset: function () {
        this.$refs['object_form'].resetFields();
      },
      /**
       * 加载权限树的方法
       */
      loadTreeData: function (id) {
        this.$http.get(this.apiUrl() + "role/tree/" + id, {}, {
          emulateJSON: true
        }).then((response) => {
          this.tree_data = response.body;
        });
      },
    },
    props: ['params']
  }
</script>
<style scoped>

</style>
